<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>容器终端</title>
    <link href="/static/xterm/xterm.css" rel="stylesheet" type="text/css"/>
    <style>
        body {
            background-color: black
        }
        .terminal-window {
            background-color: #2f4050;
            width: 99%;
            color: white;
            line-height: 25px;
            margin-bottom: 10px;
            font-size: 18px;
            padding: 10px 0 10px 10px
        }
        .containers select,.containers option {
            width: 100px;
            height: 25px;
            font-size: 18px;
            color: #2F4056;
            text-overflow: ellipsis;
            outline: none;
        }
    </style>
</head>

<body>
  <div class="terminal-window">
      <div class="containers">
          Pod名称：{{ connect.pod_name }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          容器：
          <select name="container_name" id="containerSelect">
          {% for c in connect.containers %}
            <option value="{{ c }}">{{ c }}</option>
          {% endfor %}
          </select>
      </div>
  </div>
  <div id="terminal" style="width: 100px;"></div>
</body>

<script src="/static/xterm/xterm.js"></script>

<script>

    var term = new Terminal({cursorBlink: true,rows:70});
    term.open(document.getElementById('terminal'));

    var auth_type = '{{ connect.auth_type }}';
    var token = '{{ connect.token }}';
    var namespace = '{{ connect.namespace }}';
    var pod_name = '{{ connect.pod_name }}';
    var container = document.getElementById('containerSelect').value;
    console.log(auth_type)
    console.log(token)
    console.log(namespace)
    console.log(pod_name)
    console.log(container)


     // 打开一个 websocket，django也会把sessionid传过去
    var ws = new WebSocket('ws://' + window.location.host + '/workload/terminal/' + namespace + '/' + pod_name + '/' + container + '/?auth_type=' + auth_type + '&token=' + token);

    //打开websocket连接，并打开终端
    ws.onopen = function () {
        // 实时监控输入的字符串发送到后端
        term.on('data', function (data) {
            ws.send(data);
        });

        ws.onerror = function (event) {
          console.log('error:' + e);
        };
        //读取服务器发送的数据并写入web终端
        ws.onmessage = function (event) {
          term.write(event.data);
        };
        // 关闭websocket
        ws.onclose = function (event) {
          term.write('\n\r\x1B[1;3;31m连接关闭！\x1B[0m');
        };
    };

</script>

</html>